<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" ref="formInline" label-width="70px" slot="form">          
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="类别">
                            <el-select v-model="formInline.sDeviceTypeId" placeholder="请选择" style="width:100%" @change="changeDeviceType">
                                <el-option v-for="item in formInline.sDeviceTypeIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备类型">
                            <el-select v-model="formInline.fDeviceId" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.fDeviceIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button @click="goback">返回</el-button>
            </div>
            <el-table :data="dataApply" style="width: 100%" border v-loading="loading" ref="multipleTable">
                
                <el-table-column  align="center" label="类别" min-width="100">
                     <template scope="scope">
                         {{scope.row.classificationName?scope.row.classificationName:'--'}}
                     </template>
                </el-table-column>
                
                <el-table-column  align="center" label="设备类型" min-width="110">
                    <template scope="scope">
                         {{scope.row.typeName?scope.row.typeName:'--'}}
                     </template>
                </el-table-column>
                
                <el-table-column align="center" label="提供厂商" min-width="140">
                     <template scope="scope">
                         {{scope.row.factoryName?scope.row.factoryName:'--'}}
                     </template>
                </el-table-column>

                <el-table-column prop="createTime" align="center" label="创建时间" min-width="170">
                    <template scope="scope">{{scope.row.createTime || '--'}}</template>    
                </el-table-column> 

                <el-table-column  label="其他操作" min-width="90">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" @click="checked(scope.row.pId)">查看</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { getClassIdByName, getTypeNameByClassId, getDictDeviceList} from 'api/attendanceManage';
import { mapState, mapActions } from 'vuex';

export default{
    name: 'deviceType',
    components: {TableLayout, Levelbar},
    data() {
        return {
            formInline: {// form表单数据
                sDeviceTypeId: '',
                sDeviceTypeIdList: [],
                fDeviceId: '',
                fDeviceIdList: []
            },
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            dataApply: [],
            loading: true
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    // 初始化
    created() {      
        this.getClassId();
        this.searchFetchData();
    },
    
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {    
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true; 
            getDictDeviceList(this.listQuery.page, this.config.pageSize, this.formInline.sDeviceTypeId, this.formInline.fDeviceId).then(response => {
                this.loading = false;              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
            })
        },
        getClassId() {
            getClassIdByName().then(res => {
                this.formInline.sDeviceTypeIdList = res.data.content;
                this.formInline.sDeviceTypeIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
            })
        },
        changeDeviceType(id) {
            if (id=='') {
                this.formInline.fDeviceId = '';
                this.formInline.fDeviceIdList = [];
                return '';
            }
            getTypeNameByClassId(id).then(res => {
                this.formInline.fDeviceIdList = res.data.content;
                this.formInline.fDeviceIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
                this.formInline.fDeviceId = '';
            })
        },
               // 点击查询 
        onSubmit() {
            this.searchFetchData();
        },
        goback() {
            this.$router.push({path: '/attendance/index'});
        },
        // 跳转
        checked(pId) {
            console.log(pId)
            this.$router.push({path: `/deviceType/getdeviceType/${pId}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor: #fff;
    .app-levelbar {
        height: 35px;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>
